html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .device-list{
    display: inline-block;
  }
  
  fieldset{
    margin: 20px;
  }
  
  .menus{
    display: flex;
    flex-flow: row wrap;
    margin: 20px 0px;
  }
  .menu-item{
    margin: 0 20px;
  }
  
  .wrap{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    margin: 20px;
  }
  .wrap-item{
    width: 33%;
    overflow: hidden;
  }
  #info{
    max-width: 1200px;
    height: 50px;
    overflow: auto;
  }
  
  textarea{
    display: block;
    width: 500px;
    height: 300px;
  }
  
  /* 
  滤镜
  */
  .none {
    -webkit-filter: none;	
  }
  
  .blur {
    -webkit-filter: blur(3px);	
  }
  
  .grayscale {
    -webkit-filter: grayscale(1); 	
  }
  
  .invert {
    -webkit-filter: invert(1);	
  }
  
  .sepia {
    -webkit-filter: sepia(1);
  }
  
  /* 
  聊天室样式
  */
  .chat-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 80%;
    height: 500px;
    margin: 10px auto;
    border: solid 1px #ccc;
    border-radius: 4px;
    display: flex;
    flex-flow: row nowrap;
  }
  /* 左侧列表 */
  .chat-user{
    width: 20%;
    border-right: 1px solid lightsalmon;
  }
  .chat-user h2{
    text-align: center;
  }
  
  /* 右侧消息框 */
  .chat-ctx{
    flex:1;
  }
  /* 标题 */
  .room-title{
    height: 10%;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
  }
  /* 消息 */
  .chat-msg{
    height: 60%;
    border-bottom: 1px solid #ccc;
    overflow-y: auto;
  }
  
  .chat-msg p{
    margin: 0 1rem;
    width: 70%;
    padding: .5rem 0;
  }
  .sys-msg{
    color: deeppink;
  }
  .send-msg{
    color: skyblue;
  }
  .get-msg{
    color: tomato;
  }
  
  /* 菜单及消息发送 */
  .chat-control{
    height: 30%;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
  }
  .chat-menus{
    height: 36px;
  }
  .chat-menus > ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .chat-menus > ul li{
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
  }
  .chat-inp{
    flex:1;
    position: relative;
    overflow: hidden;
  }
  .chat-control #msg{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    resize: none;
    padding: 10px;
    font-size: 16px;
    /* border: none; */
  }
  .chat-control button{
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
  }